<template>
  <div
    class="unit-exbit-null-remarks-info1"
    ref="remarksInfo"
    @mouseup="endDrag()"
    :class="{ 'unit-exbit-null-remarks-info1-2': props.type }"
  >
    <!-- <div> -->
    <auxiVue
      id="info-remarks-byId1"
      class="unit-exbit-null-remarks-info1-remarks"
      :moduleId="store.childModel.id"
      :imgBackground="colorList5[store.styleInfo.colorType - 1].auxiliaryColor"
      :exhibitBackground="colorList5[store.styleInfo.colorType - 1].shmentColor"
      @emitExhibits="emitExhibits"
    ></auxiVue>
    <!-- </div> -->

    <div class="solid-box1-parent">
      <!-- v-if="isScrollType" -->
      <div
        v-if="isScrollType"
        class="solid-box1"
        ref="track"
        @mousedown="startDrag($event)"
        @mousemove="draggings($event)"
        @mouseup="endDrag()"
      >
        <div class="solid-border" :class="'solid-border' + store.styleInfo.colorType"></div>
        <div
          :style="{ top: knobPosition + 'px' }"
          ref="knob"
          class="templatestyle1-scroll-box-tumb"
          :class="'templatestyle1-scroll-box' + store.styleInfo.colorType"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, onMounted, nextTick, onActivated } from 'vue';
import { useProjectStore } from '@/store';
import auxiVue from '../route/unitComponent/auxiliarys/index.vue';
import { colorList5 } from '../../data';
import { useRoute, useRouter } from 'vue-router';
import { pathList, pathListLoop } from '../index';
const store = useProjectStore();
const isScrollType = ref(false);
const track = ref(null); // 拖动轨道
const knob = ref(null); // 拖动手柄
const knobPosition = ref(0); // 手柄位置
const dragging = ref(false); // 是否拖动中
const remarksInfo = ref(null);
const per = ref(0);
const router = useRouter();
const route = useRoute();
const props = defineProps({
  remarks: {
    type: String,
  },
  type: {
    type: Number,
  },
});
const startDrag = (event: any) => {
  if (!isScrollType.value) {
    return;
  }
  dragging.value = true;
  var screenHeight = remarksInfo.value.clientHeight - 40; //当前高度
  let arrs = event.clientY - track.value.getBoundingClientRect().top;
  if (arrs > screenHeight) {
    knobPosition.value = arrs - 40;
  } else {
    knobPosition.value = arrs;
  }
};

// 拖动时更新手柄位置
const draggings = (event: any) => {
  if (!isScrollType.value) {
    return;
  }
  if (!dragging.value) return;

  const trackTop = track.value.getBoundingClientRect().top;
  console.log(trackTop);
  const trackHeight = remarksInfo.value.clientHeight - 40;
  console.log(trackHeight);
  const y = event.clientY - trackTop;
  let arrs = Math.min(trackHeight, Math.max(0, y));
  var screenHeight = remarksInfo.value.clientHeight - 40; //当前高度
  if (arrs > screenHeight) {
    knobPosition.value = arrs - 40;
  } else {
    knobPosition.value = arrs;
  }
  //   let scrollB=knobPosition.value/200
  var container = document.getElementById('info-remarks-byId1'); // 滚动容器
  var scrollPercent = knobPosition.value / screenHeight; // 需要滚动到的百分比
  var scrollHeight = container.scrollHeight; //总滚动高度
  var clientHeight = container.clientHeight; //滚动容器高度
  container.scrollTop = (scrollHeight - clientHeight) * scrollPercent; //设置滚动位置
};

// 结束拖动时更新状态
const endDrag = () => {
  dragging.value = false;
};
const isScrollBox = (element: any) => {
  return element.scrollHeight > 387;
};

const initScroll = () => {
  nextTick(() => {
    var container = document.getElementById('info-remarks-byId1'); // 滚动容器
    console.log(container.scrollHeight, container.clientHeight, '*******************'); //463  463

    //辅助信息刚开始未加载出来，导致container.scrollHeight== container.clientHeight time用来解决这个问题
    let time = setInterval(() => {
      var DOM = document.getElementsByClassName('auxiliarys-box-parent')[0];
      console.log('999999999999', isScrollBox(DOM)); //true;

      if (DOM) {
        if (isScrollBox(DOM)) {
          isScrollType.value = true;
          console.log('滚动盒子开启滚动');
          initScrollBox();
        } else {
          isScrollType.value = false;
          console.log('滚动盒子开启禁止滚动');
        }
        clearInterval(time);
      }
    }, 500);

    // if (isScrollBox(container)) {
    //   isScrollType.value = true;
    //   console.log('滚动盒子开启滚动');
    //   initScrollBox();
    // } else {
    //   isScrollType.value = false;
    //   console.log('滚动盒子开启禁止滚动');
    // }
  });
};

const initScrollBox = () => {
  if (!isScrollType.value) {
    return;
  }

  var container = document.getElementById('info-remarks-byId1'); // 滚动容器
  console.log(container.scrollHeight, container.clientHeight, 'container');
  container.addEventListener('scroll', function () {
    console.log('11', container.scrollHeight);
    var scrollTop = container.scrollTop;
    var scrollHeight = container.scrollHeight;
    var height = container.clientHeight;
    var scrolled = (scrollTop / (scrollHeight - height)) * 100;
    var screenHeight = remarksInfo.value.clientHeight - 40; //当前高度
    console.log(screenHeight);
    knobPosition.value = (screenHeight * scrolled) / 100;
  });
};
onMounted(() => {
  initScroll();
  initScrollBox();
});
onActivated(() => {
  initScroll();
  initScrollBox();
});
const emitExhibits = (moduleId: number, id: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[7] : pathList[7],
    query: {
      showpieceid: id,
      moduleId: moduleId,
    },
  });

  setTimeout(() => {
    const ele = document.getElementById('timeAxis-child-box-id'); // 获取元素
    const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
    window.scrollTo({
      top: top,
      behavior: 'smooth', // 设置滚动的动画效果
    });
  }, 100);
};
watch(
  () => store.childModel.id,
  () => {
    nextTick(() => {
      initScroll();
      initScrollBox();
    });
  },
  { deep: true },
);
</script>

<style scoped lang="less">
.unit-exbit-null-remarks-info1 {
  display: flex;

  // height: calc(70vh - 204px);
  position: relative;
  .unit-exbit-null-remarks-info1-remarks {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: calc(70vh - 204px);
    overflow-y: auto;
    scrollbar-width: none;
    font-family: PingFangSC, PingFang SC;
    :deep(span) {
      text-indent: 2em !important;
      font-size: 16px;
      color: #333333;

      font-family: PingFangSC, PingFang SC;
      line-height: 32px;
      margin-bottom: 20px;
    }
  }
}
.solid-box1 {
  position: relative;
  width: 20px;
  height: 100%;
}
.solid-box1-parent {
  position: absolute;
  right: 0px;
  top: 0;
  width: 20px;
  height: 100%;
}
.unit-exbit-null-remarks-info1-remarks::-webkit-scrollbar {
  display: none;
}
.templatestyle1-scroll-box-tumb {
  position: absolute;
  position: relative;
  z-index: 60;
}
.templatestyle1-scroll-box1 {
  width: 20px;
  height: 40px;
  background: transparent;
  background-image: url('https://static.jiyi.show/template/template5/scrollbar1.png?imageView2/1/w/20/h/40/format/webp');
  background-repeat: no-repeat;
}
.templatestyle1-scroll-box2 {
  width: 20px;
  height: 40px !important;
  background: transparent;
  background-image: url('https://static.jiyi.show/template/template5/scrollbar2.png?imageView2/1/w/20/h/40/format/webp');
  background-repeat: no-repeat;
}
.templatestyle1-scroll-box3 {
  width: 20px;
  height: 40px;
  background: transparent;
  background-image: url('https://static.jiyi.show/template/template5/scrollbar3.png?imageView2/1/w/20/h/40/format/webp');
  background-repeat: no-repeat;
}
.solid-border {
  position: absolute;
  top: 0;
  left: 8px;
  height: 100%;
  width: 4px;
  border-radius: 5px;
  opacity: 0.3;
}
.solid-border1 {
  background: rgba(69, 46, 32, 0.3);
}
.solid-border2 {
  background: rgba(140, 122, 87, 0.3);
}
.solid-border3 {
  background: rgba(53, 60, 72, 0.3);
}
.unit-exbit-null-remarks-info1-2 {
  min-height: 600px;
  position: relative;
  .unit-exbit-null-remarks-info1-remarks {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 600px;
    overflow-y: auto;

    font-family: PingFangSC, PingFang SC;
    :deep(span) {
      text-indent: 2em !important;
      font-size: 16px;
      color: #333333;

      font-family: PingFangSC, PingFang SC;
      line-height: 32px;
      margin-bottom: 20px;
    }
  }
}
.text-body-item-content {
  :deep(.unit_box_right_content, .tdesign-demo-image-viewer__base) {
    width: 1020px !important;
  }
  :deep(.tdesign-demo-image-viewer__base) {
    width: 1020px !important;
  }
  :deep(.video-box) {
    width: 1020px !important;
  }
  :deep(.video-box) {
    width: 1020px !important;
  }
  :deep(.audio-box) {
    width: 1020px !important;
  }
  :deep(img) {
    width: 100% !important;
  }
  :deep(.unit-exbit-null-remarks-info1-remarks) {
    max-height: 100% !important;
  }
  :deep(.unit-exbit-null-remarks-info1) {
    max-height: 100% !important;
  }
  :deep(.solid-box) {
    display: none;
  }
  :deep(.auxiliarys-box) {
    padding-top: 0 !important;
    margin-top: 0px !important;
    div {
      margin: 0;
      width: 1020px !important;
    }
  }
}
</style>
